
<template>
  <!-- 音乐歌词组件 -->
  <div
    id="fullLayout"
    @touchstart="touchstart"
    @touchmove="touchmove"
    @touchend="touchend"
  >
    <!-- 不影响歌曲的播放 -->
    <div class="container">
      <!-- 当前音乐的背景 -->
      <div
        class="bg-photo"
        :style="`background-image:url(${musicItem.al.picUrl})`"
      ></div>
      <!-- 歌名 -->
      <!-- 当前音乐旋转的图片 -->
      <div class="rotate-photo" v-if="isLysic">
      <p class="rotate-name">{{musicItem.name}}</p>
      <span class="rotate-ar">{{musicItem.ar[0].name}} </span>
        <div @click="toggleLyric">
          <ul :class="flag == false ? 'active' : ''">
            <li>
              <img :src="musicItem.al.picUrl" alt />
            </li>
          </ul>
        </div>
      </div>
      <!-- 解析当前音乐歌词 -->
      <div  class="lyric-box" v-if="!isLysic">
        <div class="text">{{ musicItem.name }}</div>
        <div class="lyric-item" >
        <div @click="toggleLyric">
          <ul
            :style="`transform:translateY(${-currentIndex * height + 100}px)`"
          >
            <li
              v-for="(item, i) in lyricArr"
              :key="item.id"
              :class="currentIndex == i ? 'active' : ''"
            >
              {{ item.lyricText }}
            </li>
          </ul>
        </div>
      </div>
      </div>
      <!-- 时间进度条 -->
      <div class="range">
        <div class="bar">
          <span class="time-left">{{curTime | playerTime}}</span>
          <van-slider v-model="value" active-color="#ee0a24"
          bar-height="4px"
         
          >
          <!-- @input 拖动进度条实时触发 -->
            <template #button>
              <div class="custom-button"></div>
            </template>
          </van-slider>
          <span class="time-right">{{totTime | playerTime}} </span>
        </div>
      </div>
      <!-- 按钮开关 -->
      <div class="buttons">
        <div v-if="playStatus==1" @click="changeMode" class="iconfont icon-xunhuan1"></div>
        <div v-else class="iconfont icon-random" @click="changeMode"></div>
        <div class="iconfont icon-SanMiAppoutlinei1" ></div>
        <div :class="['iconfont' ,flag ? 'icon-ico_zanting_xuanzhong': 'icon-zanting1','center']"
         @click="togglePlay"></div>
        <div class="iconfont icon-SanMiAppoutlinei"></div>
        <div class="iconfont icon-aixin"></div>

      </div>
    </div>
  </div>
</template>

<script>
import { getLyricById} from "../../api/player";
// import { getPlaylistDetail} from "../../api/rank";

export default {
  name: "FullLayout",
  props: {
    //歌曲当前播放的时间
    curTime: [Number, String],
    //歌曲时间总长度
    totTime: [Number, String],
    musicItem: {
      type: Object,
    },
    //来自player组件的歌单id
    listIds:[Number, String],
  },
  data() {
    return {
      startTime: 0,
      endTime: 0,
      isMove: false, //手指滑动的状态
      startX: 0,
      moveX: 0,
      flag: true, //控制播放-暂停按钮
      isLysic: true,//显示歌词
      lyricArr: [],//歌词
      index: 0,
      height: 30,
      //获取歌词的id
      id: null,
      //进度条
      value:0,
      //随机 顺序播放
      playStatus: 1,
      playerLists:[],//歌曲列表
    };
  },
  //过滤器
  filters: {
    //时间格式化 0:00 
    playerTime(value) {
      let m=parseInt(value / 60);//分钟
      let s=parseInt(value % 60);//秒
      if(m==0 && s==0) {
        return "0:00";
      }else{
        return m + ":" +(s<10? "0"+s : s);
      }
    }
  },
  // 侦听或计算属性
  watch: {
    //当前播放时间
    curTime() {
      let ctime = this.curTime;
      // 歌词数组
      let arr = this.lyricArr;
      let index = 0;
      for (let i = 0; i < arr, length; i++) {
        //如果为最后一条歌词
        if (i >= arr.length - 1) {
          // 添加最后一个歌词
          index = i;
          break;
        }
        if (ctime >= arr[i].time && ctime < arr[i + 1].time) {
          // 当前高亮的歌词
          index = i;
          break;
        }
      }
      this.index = index;
      //高亮滑块的值 当前时间 / 总时间 * 100;
      this.value=(ctime / this.totTime) * 100;
      // let duration=(this.totTime*this.value) / 100; //歌曲播放当前时间

    },
    // 来自播放控件的歌曲数据
    musicItem(newV) {
      this.id = newV.id;
    },
    //歌曲列表
    listIds() {
      getPlaylistDetail({ id: this.listIds }).then((data) => {
        this.playerLists = data.playlist.tracks; //获取歌单数据
      });
    }
  },
  computed: {
    //当前
    currentIndex() {
      let ctime = this.curTime;
      let arr = this.lyricArr;
      let index = 0;
      for (let i = 0; i < arr.length; i++) {
        if (i >= arr.length - 1) {
          // 添加最后一个歌词
          index = i;
          break;
        }
        if (ctime >= arr[i].time && ctime < arr[i + 1].time) {
          // 当前歌词高亮
          index = i;
          break;
        }
      }
      return index;
    },
  },
  
  methods: {
    //开始滑动
    touchstart(event) {
      //获取开始滑动时间
      this.startTime = new Date().getTime();
      //手指触到的坐标到页面左边的距离
      this.startX = event.touches[0].pageX;
    },
    touchmove(event) {
      //开始滑动
      this.isMove = true;
      //滑动到页面左边的距离
      this.moveX = event.touches[0].pageX;
    },
    //滑动结束
    touchend() {
      //计算 你滑动操作的总时间
      let time = new Date().getTime() - this.startTime;
      // 滑动的值,负值表示向左 (手指滑动了的距离)
      let x = this.moveX - this.startX;
      // 开启了滑动即你触发滑动事件 , 滑动时间 向左滑动了 
      if (time > 150 && this.isMove && x < 0) {
        //调用父组件关闭子组件的方法
        this.$emit("slide-out", false);
      }
    },
    // 控制音乐播放或暂停切换
    togglePlay() {
      if (this.flag) {
        this.flag = false;
      } else {
        this.flag = true;
      }
      // 控制音乐播放或暂停
      this.$emit("music-play", this.flag);
    },
    // 获取歌词的方法
    getLyricByIdFun() {
      getLyricById({ id: this.id }).then((data) => {
        // 
        if (data.code==200) {
          let lyric = data.lrc.lyric;
          // 调用解析歌词的方法
          this.parseLyric(lyric);
        }
      }).catch(err=>{
        
      });
    },
    // 解析歌词
    parseLyric(lyric) {
      // 根据换行符 把字符串切换成数据
      let arr = lyric.split("\n");
      // 删除空格字符
      arr.pop();
      // 匹配每句词的时间的正则表达式
      let reg = /\[(\d+):(\d+\.\d+)\](.*)/;
      // 定义空数组记录解析后的数据
      let lyricArray = [];
      // 循环arr
      for (let i = 0; i < arr.length; i++) {
        let regEx = new RegExp(reg);
        if (regEx.test(arr[i])) {
          let obj = {
            time: parseInt(RegExp.$1) * 60 + parseFloat(RegExp.$2),
            lyricText: RegExp.$3,
            id: (Math.random() + "" + i).slice(2),
          };
          // 添加数据
          lyricArray.push(obj);
        }
      }
      // 记录解析后的歌词
      this.lyricArr = lyricArray;
    },
    
    //切换播放模式 随机:2,顺序:1
    changeMode() {
      this.playStatus=this.playStatus==1 ? 2 : 1;
    },
    
    //获取滚动条变化
    // sliderchange(val) {
    //   
    //   let duration=(this.totTime * val) / 100; //歌曲总时间
    //   this.tomeLeft=duration; //修改左边时间的数据

    // },
    //点击显示歌词
    toggleLyric() {
      this.isLysic=!this.isLysic;
    }
  },

  created() {
    // 获取歌词id
    // this.getLyric(this.musicItem.id);
    this.id = this.musicItem.id;
    // 
    this.getLyricByIdFun();
  },
};
</script>

<style lang="less" scoped>
#fullLayout {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1001;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
  .bg-photo,
  .rotate-photo,
  .lyric-box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  .bg-photo {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    // 设置背景模糊
    filter: blur(200px);
    z-index: 999;
  }
  .rotate-photo {
    z-index: 999;
    > div {
      width: 300px;
      height: 300px;
      margin: 50px auto 0;
      overflow: hidden;
      .active {
        animation-play-state: paused;
      }
      ul {
        width: 300px;
        height: 300px;
        border: 40px solid #000;
        border-radius: 50%;
        overflow: hidden;
        box-sizing: border-box;
        animation-name: rotateAnimation;
        animation-duration: 5s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        li {
          width: 220px;
          height: 220px;
          border: 5px solid #ccc;
          border-radius: 50%;
          overflow: hidden;
          box-sizing: border-box;
          line-height: 220px;
          text-align: center;
          img {
            width: 100%;
            vertical-align: middle;
            transform: scale(1.5);
          }
        }
      }
    }
    p{
      margin-top: 15px;
      font-size:16px;
      font-weight:bold;
      color:#fff;
      padding-bottom: 5px;
    }
    span{
      color:#fff;
      font-size:14px;
    }
  }
  .lyric-box{
    .text {
      position: relative;
      z-index: 2001;
      top:0px;
      font-size: 20px;
      font-weight:bold;
      margin-bottom: 28px;
      color:#cc163a;
    }
    overflow: hidden;

  }
  .lyric-item {
    top: 35px;
    z-index: 2000;
    text-align: center;
    height: 460px;
    overflow: hidden;
    
    
    ul {

      li {
        height: 30px;
        line-height: 30px;
        font-size: 15px;
        color: #fff;
        transition: all 0.5s;
      }
      .active {
        font-size: 18px;
        color: #EE4863;
      }
    }
  }
}
.range {
  position: relative;
  bottom: 82px;
  text-align: center;
  height:20px;
  width:100%;
  z-index: 1002;
  position: absolute;
  bottom:80px;
  .bar{
    width:240px;
    margin: 0 auto;
    color:#fff;
    position: relative;
    font-size:12px;
    .time-left{
      position: absolute;
      left:-36px;
      top:-4px;
      z-index: 1002;

    }
    .time-right{
      position: absolute;
      right:-36px;
      top:-4px;
      z-index: 1002;

    }
  }
}
.buttons{
  display: flex;
  position: absolute;
  bottom:40px;
  width:100%;
  z-index: 1002;
  .iconfont{
    flex: 1;
    width:20%;
    text-align: center;
    line-height:38px;
    color:#fff;
    font-size:25px;
    &.center {
      font-size:35px;
    }
  }
}
//定义动画
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>

